<template>
    <div class="history">
        <navbar title="历史记录" :show-back="true"></navbar>
        <page :top="90">
            <van-tabs v-model="active" class="fa" @change="childrenChange">
                <!-- //头部z -->
                <van-tab class="tabvan" v-for="item, index in historyArr" :title="item.title" :key="index">
                    <!-- //内容z -->
                    <div class="content" v-for="v, i in historyList" :title="v.title" :key="i">

                        <div class="nodata" v-if="v.length == 0">
                            <img src="../../static/images/img/noLogin.png">
                            <p style="text-align: center;">没有数据</p>
                        </div>

                        <div v-else class="contentone">
                            <div class="img" @click="enterInfo(v.thing_id)">
                                <img :src="v.thing_img">
                                <div class="search" v-if="v.thing_status == 1 && item.thing == 1">已认领</div>
                                <div class="search" v-else-if="v.thing_status == 0 && item.thing == 1">未认领</div>
                                <div class="search" v-else-if="v.thing_status == 1 && item.thing == 2">已寻回</div>
                                <div class="search" v-else-if="v.thing_status == 0 && item.thing == 2">未寻回</div>
                            </div>

                            <div class="right" @click="enterInfo(v.thing_id)">
                                <div class="title">{{ v.thing_title }}</div>
                                <div class="context">{{ v.thing_introduce }}</div>
                            </div>

                        </div>
                        <template>
                            <div class="queren" @click="telphonek(v.thing_id)"
                                v-if="v.thing_status == 0 && item.thing == 1">确认被认领
                            </div>
                            <div class="querene" @click="telphonek(v.thing_id)"
                                v-else-if="v.thing_status == 0 && item.thing == 2">确认已寻回
                            </div>
                        </template>
                    </div>

                </van-tab>



            </van-tabs>
        </page>
    </div>
</template>
  
<script>
import { Dialog } from 'vant';
export default {
    data() {
        return {
            active: 0,
            historyArr: [
                {
                    title: '失物招领',
                    thing: 1,
                },
                {
                    title: '寻物启事',
                    thing: 2,
                },
            ],
            //接口反的
            historyList: [],
            zhuangtai: 0,
            tokenid: 0,
            success: '',
        }
    },
    created() {
        //获取本地user_id
        this.tokenid = this.$utils.getItem("token").user_id
        console.log("本地token", this.tokenid);
        this.zhuangtai = this.$route.query.id;
        this.active = this.$route.query.id - 1;
        console.log('传过来的', this.zhuangtai);
        this.getHistoryList();
    },
    methods: {
        //进入详情
        enterInfo(id) {
            this.$router.push({
                path: "/info",
                query: {
                    id
                }
            })
        },

        telphonek(id) {
            //弹窗
            Dialog.confirm({
                message: '请确定已与【失主】或【物主】进行详细沟通并成功拿到丢失物品，一但确定不可取消！',
            })
                .then(async () => {
                    // 接口改变状态
                    console.log("id", id)
                    let ayay = await this.$http.home.changeStatus({
                        user_id: this.tokenid,//用户id
                        thing_id: id,//物品的id
                        thing_status: 1, // 要修改的状态
                    });
                    this.message = ayay
                    console.log("this.message 修改 ：", this.message);
                    this.getHistoryList()
                })
                .catch(() => {
                    // Toast('提示内容');
                    console.log(5555);
                });

        },


        childrenChange() {
            if (this.zhuangtai == 1) {
                this.zhuangtai = 2
                this.getHistoryList();
                console.log("1变2", this.zhuangtai);
            } else if (this.zhuangtai == 2) {
                this.zhuangtai = 1
                this.getHistoryList();
                console.log("2变1", this.zhuangtai);
            }

        },

        async getHistoryList() {
            let res = await this.$http.home.history({
                user_id: this.tokenid,
                thing_type: this.zhuangtai,
            });
            this.historyList = res
        },
        // async getChangeStatusList() {
        //     let ayay = await this.$http.home.changeStatus({
        //         user_id: this.tokenid,
        //         thing_id: this.zhuangtai,//物品的id
        //         // 要修改的状态
        //         thing_status: 1,
        //     });

        //     this.message = ayay
        //     console.log("this.message 修改 ：", this.message);

        // },


    }
}
</script>
  
<style scoped lang='less'>
@import "~@less/history";
</style>
  